<template>
  <div class="content">
    <div class="back">
      <div class="nav">
        <ul>
          <li>全部</li>
          <li>
            价格
            <i class="up" @click="priceUp"></i>
            <i class="down" @click="priceDown"></i>
          </li>
          <li @click="category">类别</li>
          <li >品牌</li>
        </ul>
      </div>
      <div class="collect">
        <ul class="list" v-for="(list) in gpList">
          <li class="item" v-for="(goods,index) in goodsList">
            <div class="top"  @click="pindan(list.id)">
              <div class="pic">
                <img :src="goods.mallImg" alt="">
              </div>
              <span class="col-title">
              <p>{{goods.mallName}}</p>

</span>
              <span class="price">&yen {{goods.salePrice/100}}</span>
            </div>
            <div class="bottom">
              <span @click=show(index) class="more">更多
                <transition name="fade">
                  <div class='more-list' v-show="curId===index?isShow:false">
                    <div>取消收藏</div>
                    <div>进入店铺</div>
                  </div>
                </transition>
              </span>
              <span class="pin pin1">邀请拼单</span>
              <span class="pin pin2" @click="goPin">一键拼单</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../../components/httpUtil/httpUtil'
  import {msg_10046} from '../../message/msg_10046'
  export default {
    name: 'Collect',
    data () {
      return {
        isShow:false,
        goodsList:[],
        gpList:[],
        curId:0,
        isClick:false,
        phoneNum:'186',
        GPId:0,
        userId : JSON.parse(window.localStorage.data).id
      }
    },
    methods: {
      //
      show(index) {
        if(this.curId === index){
          this.isShow= !this.isShow
        }else {
          this.curId = index;
        }

      },
      // 指定排序的比较函数
      compareUp (property) {
        return function (obj1, obj2) {
          let value1 = obj1[property];
          let value2 = obj2[property];
          return  value1 - value2 ;     // 升序
        }
      },
      compareDown (property) {
        return function (obj1, obj2) {
          let value1 = obj1[property];
          let value2 = obj2[property];
          return  value2 - value1 ;     // 升序
        }
      },
      // 价格排序
      priceUp(){
        this.goodsList.sort(this.compareUp('salePrice'))
      },
      priceDown(){
        this.goodsList.sort(this.compareDown('salePrice'))
      },
      // 类别排序
      category(){
        this.isClick = !this.isClick;
        if(this.isClick){
          this.goodsList.sort(this.compareUp('goodsType1'))
        }else {
          this.goodsList.sort(this.compareDown('goodsType1'))
        }
      },
      // 10014收藏列表
      getGoods(){
        const jsonValue = JSON.stringify({
          "c":"10014",
          "p":{
            "userId":JSON.parse(window.localStorage.data).id, // 用户ID
            "tokenId": token()
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          this.goodsList = res.data.p.goods;
          this.gpList = res.data.p.list
          this.GPId = res.data.p.list[0].id

          //需要储存的数据
          let uesrInfo = {
            'userId': JSON.parse(window.localStorage.data).id,
            'tokenId': token(),
            'phoneNum': this.phoneNum,
            'GPId': this.GPId
          }

          localStorage.setItem('userId'+this.userId, JSON.stringify(uesrInfo))
        })
      },
      // 商品详情
      pindan(id){
        this.GPId = id
        this.$router.push({name:'PinGoodsDetail',params:{userId:JSON.parse(window.localStorage.data).id,GPurchaseId:id}  })
      },
      // 一键拼单
      goPin(){
        console.log(1)
      },
      },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          varThis.hideLoading();
          wx_config(varThis.wxlist);
          varThis.hideLoading();
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
//      this.userId = localStorage.getItem('zddUserId')
      this.getGoods()
    }
  }
</script>
<style scoped>
  .back{
    background: #f4f4f4;
  }
  .nav {
    background: #ffffff;
    width: 100%;
    height: 92px;
    line-height: 92px;
  }

  .nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }

  .nav li {
    position: relative;
    font-size: 32px;
  }
  .nav i{
    position: absolute;
    width: 22px;
    height: 12px;
    background: url("./ico@1x.png") no-repeat ;
    background-size: 100%;
  }
  .nav .up{
    background-position: 0px 0px;
    top: 30px;
    left: 72px;
  }
  .nav .down{
    background-position: 0px -18px;
    position: absolute;
    top:50px;
    left: 72px;
  }
  .collect {
    width: 100%;
    height: auto;
  }

  .collect ul {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }

  .collect li {
    background: #ffffff;
    width: 100%;
    height: 314px;
    margin-bottom: 20px;
    position: relative;
  }

  .top {
    height: 222px;
    width: 100%;
    border-top: 1px solid rgba(244, 244, 244, 1);
    border-bottom: 1px solid rgba(244, 244, 244, 1);
  }

  .top .pic {
    position: absolute;
    left: 30px;
    top: 22px;
    width: 174px;
    height: 174px;
    background-color: rgba(242, 242, 242, 1);
  }
  .top .pic img{
    width: 100%;
    height: 100%;
  }
  .col-title {
    font-size: 24px;
    position: absolute;
    left: 224px;
    top: 20px;
    color: #3b3b43;
    line-height: 42px;
  }

  .top .price {
    font-size: 32px;
    position: absolute;
    bottom: 120px;
    left: 224px;
    color: #fd4c2e;
  }

  .bottom {
    width: 100%;
    position: relative;
    height: 0.64px;
  }

  .bottom .more {
    position: absolute;
    font-size: 20px;
    height: 96px;
    line-height: 92px;
    color: #a1a1a1;
    left: 150px;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
  .bottom .more-list{
    background: url("./bg_more@1x.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 80px;
    left: -50px;
    z-index: 1;
    width: 158px;
    height: 136px;
    vertical-align: middle;
  }
  .more-list div{
    width:100%;
    margin-top: 18px;
    height: 34px;
    line-height: 58px;
    text-align: center;
    font-size: 22px;
    color: #a1a1a1;
  }
  .bottom .pin {
    position: absolute;
    width: 180px;
    height: 63px;
    top: 14px;
    line-height: 64px;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
    background-size: 100%;
  }

  .bottom .pin1 {
    background-image:url("./btn1@1x.png") ;
    right: 237px;
    color: #fe3519;
  }

  .bottom .pin2 {
    background-image:url("./btn2@1x.png") ;
    right: 30px;
    color: #ffffff; ;
  }

</style>
